<template>
  <router-view></router-view>
  <div class="stage_c_footer">
      <div class="d " id="zbf_foot_btns" v-if="isShow"  >
          <span   v-for="(item,index) in menuList" :key="index"    @click="handleClick(index, item.path)"  :class="{'active': isActive == index}">{{ item.name }}</span>
      </div>
      <div class="showHide"  style="width: 30px; font-size: 15px;"  >
          <!-- <img src="./assets/箭头左.png" alt="" srcset="" @click="showHide">  -->
          <div  @click="showHide" ref="doms">点击显示</div>
      </div>
  </div>
</template>



<script setup>
import { onMounted ,ref} from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const isShow = ref(true)
let doms=ref("")
let showHide = () => {
isShow.value = !isShow.value
if (isShow.value === true) {
  doms.value.innerText = "点击显示"
} else if(isShow.value === false){
  doms.value.innerText = "关闭显示"
}
  
}
let isActive=ref();
let menuList=ref(
  [
      { name: "主界面", path: "ranshaoshuzihuajiance" },
      { name: "横截面温度场", path: "indexs" },
      { name: "燃烧稳定性监测", path: "ranshaowendingxing" },
      { name: "煤粉分配率", path: "meifen" },
      { name: "预警信息", path: "yujing" },
      { name: "历史数据查询", path: "history" },
      { name: "叠加历史数据查询", path: "history0" },
  ]
)

let handleClick=(index, path)=>{  
  isActive.value=index
    router.push(path);  //路由跳转
}

</script>


<style scoped>
.stage_c_footer {
width: 100%;
/* height: calc(100% - 300px); */
/* background-color: #333; */
/* background: rgb(0 188 255 / 10%); */
position: fixed;
z-index: 100;
bottom: 0px;
padding: 20px;
/* right:50px; */
box-sizing: border-box;
display: flex;
flex-direction: column;
}

.stage_c_footer .d {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}

.stage_c_footer .d span {
cursor: pointer;
height: 57px;
line-height: 57px;
text-align: center;
/* padding:  4px 20px; */
font-size: 24px;
width: 210px;
/* color: #00d4ff; */
color: #65C2C2;
display: block;
background: url(./assets/bottom_menu.png) no-repeat center / cover;


}

.stage_c_footer .d>span:hover,
.stage_c_footer .d>span.active {
width: 210px;
background: url(./assets/bottom_menu_active.png) no-repeat center / cover;
font-size: 24px;
}

.stage_c_r .d>span:hover,
.stage_c_r .d>span.active {
background: rgb(0 188 255 / 20%);
background: #04192c;
color: #00d4ff;
}

.stage_c_r .d>span:hover,
.stage_c_r .d>span.active {
background: rgb(0 188 255 / 20%);
background: #04192c;
color: #00d4ff;
}
</style>
